<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<base href="http://localhost:8080/jxc/" />
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="admin/view.css" />
<link rel="icon" href="/favicon.ico">
<title>进销存管理后台</title>
</head>
<body class="layui-view-body">
	<div class="layui-content">
		<div class="layui-page-header">
			<div class="pagewrap">
<!-- 				<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">用户</a> -->
<!-- 					<a><cite>用户组</cite></a> -->
<!-- 				</span> -->
				<h2 class="title">员工信息</h2>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="form-box">
						<div class="layui-form layui-form-item">
							<div class="layui-inline">
								<div class="layui-form-mid">工号:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<input type="text" autocomplete="off" class="layui-input" id="qemployeecode"/>
								</div>
								<div class="layui-form-mid">用户名:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<input type="text" autocomplete="off" class="layui-input" id="qemployeename"/>
								</div>
								<div class="layui-form-mid">邮箱:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<input type="text" autocomplete="off" class="layui-input" id="qemployeeemail"/>
								</div>
								<div class="layui-form-mid">性别:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<select name="sex" id="qemployeesex">
										<option value="" checked>请选择</option>
										<option value="男">男</option>
										<option value="女">女</option>
									</select>
								</div>
								<button class="layui-btn layui-btn-blue" id="query" data-type="reload">查询</button>
								<button class="layui-btn layui-btn-primary" id="reset">重置</button>
							</div>
						</div>
						<button class="layui-btn layui-btn-blue" id="addemployee">
							<i class="layui-icon">&#xe654;</i>新增
						</button>
						<table id="table" lay-filter="tableTool"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 	弹出框 -->
	<div id="content" style="display: none">
		<form id="updateemployee">
			<table id="data" class="editorTable"
				style="margin: auto; margin-top: 50px; width: 80%;">
				<tr class="layui-form-item">
					<th class="layui-form-label">员工编号</th>
					<td><input type="text" readonly="true" id="employeecode" name="employeecode" class="layui-input-inline"/></td>
				</tr>

				<tr class="layui-form-item">
					<th class="layui-form-label">员工姓名</th>
					<td><input type="text" id="employeename" name="employeename"
						class="layui-input-inline" /></td>
				</tr>

				<tr class="layui-form-item">
					<th class="layui-form-label">生日</th>
					<td><input type="text" id="employeebirthday"
						name="employeebirthday" class="layui-input-inline" /></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">性别</th>
					<td><input type="radio" name="employeesex" value="男" id="m" checked/>男 <input
						type="radio" name="employeesex" value="女" id="f" />女</td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">电话</th>
					<td><input type="text" id="employeetel" name="employeetel"
						class="layui-input-inline" /></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">邮箱</th>
					<td><input type="text" id="employeeemail" name="employeeemail"
						class="layui-input-inline" /></td>
				</tr>
			</table>
		</form>
	</div>
	<script src="layui/layui.js"></script>
	<script>
		layui.use([ 'element', 'table', 'form', 'layer', 'jquery', 'laydate'], function(
				element, table, form, layer, $, laydate) {	
			
			laydate.render({
					elem: '#employeebirthday'//指定元素				
				});
			//展示已知数据
			table.render({
				elem : '#table',
				method : 'post',
// 				url : 'employee/getallemployee',
				url : 'employee/findemployeedynamic',
				cellMinWidth : 80,
				cols : [ [ {
					field : 'employeecode',
					title : '工号',
					sort : true
				}, {
					field : 'employeename',
					title : '姓名'
				}, {
					field : 'employeebirthday',
					title : '生日'
				},{
					field : 'employeesex',
					title : '性别'
				},{
					field : 'employeeemail',
					title : '邮箱'
				},{
					field : 'employeetel',
					title : '电话'
				},{
					field : 'right',
					title : '操作',
					toolbar : '#barDemo'
				} ] ],
				id : 'testReload',
				where:{
					"employeecode" : '',
					"employeename" : '',
					"employeesex" : '',
					"employeeemail" : ''
				},
				skin : 'line' //表格风格
				,
				even : true,
				page : true //是否显示分页
				,
				limits : [ 5, 7, 10 ],
				limit : 5
			//每页默认显示的数量
			});

			//监听工具条
			table.on('tool(tableTool)', function(obj) { //注：tool是工具条事件名，tableTool是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'detail') { //查看
					layer.msg('ID：' + data.employeecode + '的查看操做');
				} else if (layEvent === 'del') { //删除
					//console.log("删除");
					layer.confirm('确认删除' + data.employeecode + '？',
							function(index) {
								//do something
								$.ajax({
									type : "post",
									url : "employee/deleteemployee",
									dataType : 'json',
									data : "employeecode=" + data.employeecode,
									success : function(data) {//成功返回1
										if (data == 1) {
											obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
											layer.close(index);
											layer.msg('成功删除');
										} else {
											layer.msg('删除失败');
										}
									},
									error : function() {
										layer.msg('操作失败');
									}
								});
							});
				} else if (layEvent === 'edit') { //编辑
					$("#employeecode").val(data.employeecode);
					$("#employeename").val(data.employeename);
					$("#employeebirthday").val(data.employeebirthday);
					if (data.employeesex == "男") {
						$("#m").prop("checked", "checked");
						$("#f").prop("checked", "");
					} else {
						$("#f").prop("checked", "checked");
						$("#m").prop("checked", "");
					}
					$("#employeetel").val(data.employeetel);
					$("#employeeemail").val(data.employeeemail);
					//do something
					layer.open({
						type : 1,
						title : "编辑员工",
						btn : [ '确定', '取消' ],//yes->添加==btn1->添加,btn2类推对应数组
						area : [ '450px', '450px' ],
						content : $("#content"),
						anim : 3,
						success : function() {
						},
						yes : function() {
							$.ajax({
								url : 'employee/updateemployee',
								type : 'post',
								dataType : 'text',
								data : $("#updateemployee").serialize(),
								success : function(data) {
									if (data == 1) {
										layer.msg('修改成功');
										location.reload();
									} else {
										layer.msg('修改失败');
									}
								}
							});
						}
					});
				}

			});
			
			
    //顶部查询，table.reload方法
	var active = {
    	reload: function(){
//       		var demoReload = $('#demoReload');//为了取input的值
          		//执行重载
      		table.reload('testReload', {//testReload:第一次加载table.render中指定的id
        			page: {
          				curr: 1 //重新从第 1 页开始
        					}
        			,where: {
          			
          				"employeecode" : $("#qemployeecode").val(),
						"employeename" : $("#qemployeename").val(),
						"employeesex" : $("#qemployeesex").val(),
						"employeeemail" : $("#qemployeeemail").val()
        		}
      }, 'data');
    }
	}		
	$("#query").on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });
			
			//顶部新增
			$("#addemployee").click(function() {
// 				$("#data tr:first").css("display","");
				$("#employeecode").removeAttr("readonly");
				layer.open({
					type : 1,
					title : "添加员工",
					btn : [ '确定', '取消' ],//yes->添加==btn1->添加,btn2类推对应数组
					area : [ '450px', '450px' ],
					content : $("#content"),
					anim : 3,
					success : function() {
						$("#data input[type='text'],input[type='password'],input[type='date']").val("");
					},
					yes : function() {
						$.ajax({
							url : 'employee/addemployee',
							type : 'post',
							dataType : 'text',
							data : $("#updateemployee").serialize(),
							success : function(data) {
								if (data == 1) {
									layer.msg('添加成功');
									location.reload();
								} else {
									layer.msg('添加失败');
								}
							}
						});
						//display=none
					},
					end: function() {//无论是确认还是取消，只要层被销毁了，end都会执行
						$("#employeecode").attr("readonly","true");
					}
				});
			});
		});
	</script>
	<!-- tools -->
	<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</body>
</html>